<template>
	<view class="orderIndex" v-if="orderInfo!=null">
		<uninavbar title="确认订单" leftIcon='leftIcon' rightIcon='' rightText="" />
		<navigator url="/pages/user/receivingAddress?goUrl=orderIndex">
			<view class="orderInfo orderDom">
				<image class="orderAddressImg" src="/static/images/productDetails/od.png" mode=""></image>
				<view class="orderInfoCon" v-if="addressInfo!=null">
					<view class="">
						{{addressInfo.name}} {{addressInfo.phoneNumber}}
					</view>
					<view class="orderAddress">
						{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.region}}{{addressInfo.detailAddress}}
					</view>

				</view>
				<view class="orderInfoCon" v-else>
					添加收货地址
				</view>
				<image class="orderadd" src="/static/images/productDetails/zk.png" mode=""></image>
			</view>
		</navigator>
		<view class="orderGoods orderDom" v-for="(item,index) in this.orderInfo.cartPromotionItemList" :key="index">
			<!-- 	<view class="storeName">
				{{item.productBrand}}
			</view> -->
			<view class="goodsInfo">
				<image :src="item.productPic" mode=""></image>
				<view class="goodsInfoText">
					<view class="goodsTitle">
						<text class="goodsName">{{item.productName}}</text>
						<text>￥{{item.price}}</text>
					</view>
					<view class="network">
						{{item.productSubTitle}}
					</view>
					<!-- <view class="orderTime">
						发货时间:付款后4天内发货
					</view> -->
				</view>

			</view>
			<!-- 		<view class="goodsList">
				<view class="">
					购买数量
				</view>
				<view class="goodsNum">
					<view class="minusBtn" @tap="minusNumDom()">-</view>
					<view class="numInput">
						<input type="number" value="" v-model="numInput" />
					</view>
					<view class="addNumBtn" @tap="addNumDom()">
						+
					</view>
				</view>
			</view> -->
			<view class="goodsList">
				<view class="">
					配送方式
					<text>普通配送</text>
				</view>
				<view class="">
					快递 免邮
					<!-- <image src="/static/images/productDetails/zk.png" mode=""></image> -->
				</view>

			</view>
			<view class="goodsList">
				<view class="">
					运费
				</view>
				<view class="">
					{{orderInfo.calcAmount.freightAmount}}
				</view>

			</view>
			<view class="goodsList">
				<view class="">
					优惠
				</view>
				<view class="">
					￥{{item.reduceAmount}}
				</view>

			</view>
			<view class="goodsList">
				<view class="">
					商品数量
				</view>
				<view class="">
					X{{goodsQuantity}}
				</view>
			
			</view>
			<!-- 		<view class="goodsList">

				<view class="">
					开具发票
				</view>
				<view class="">
					<navigator url="/order/invoice">
						增值税电子发票
						<image src="/static/images/productDetails/zk.png" mode=""></image>
					</navigator>
				</view>
			</view> -->
			<view class="goodsList">
				<view class="">
					订单备注
				</view>

				<input class="notes" type="text" placeholder="选填，请先和商家协商一致，付款后…" v-model="userNote" />
			</view>
			<view class="goodsList">
				<view class=""></view>
				<view class="">
					共1件 小计：<text class="goodsPrice"> ¥ {{item.price}}</text>
				</view>
			</view>
		</view>

		<view class="orderGoodsBtn">
			<view class="orderGoodNum"> </view>
			<view class="orderAmount">
				<view class="">
					合计：<text> ¥ {{orderInfo.calcAmount.payAmount}}</text>
				</view>
				<view class="discount">
					共1件
					优惠：<text> ¥ {{orderInfo.calcAmount.promotionAmount}}</text>
				</view>

			</view>
			<view class="orderBtn" @tap="popup()">提交订单</view>
		</view>
	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import API from '@/config/newApi.js'
	export default {
		components: {
			uninavbar,
		},
		data() {
			return {
				numInput: 1,
				CartIds: null,
				orderInfo: null,
				addressInfo: null,
				userNote: "",
				urlOrderType: '',
				goodsQuantity: 0,
			}
		},
		onShow() {
			uni.$on('newAddPv', (e) => {
				console.log(e)
				this.addressInfo = e
			})
		},
		onLoad(query) {
			console.log(query.CartIds, query.quantity)
			this.CartIds = query.CartIds.split(',')
			this.urlOrderType = query.urlType
			this.goodsQuantity = query.quantity
			if (this.urlOrderType == 'cart') {
				this.generateConfirmOrder()
			} else {
				this.orderGoods(query)
			}

		},
		methods: {
			orderGoods(query) {
				let data = {
					skuId: query.CartIds,
					quantity: this.goodsQuantity,

				}
				let args = {
					ContentType: 'application/x-www-form-urlencoded'
				}
				API.orderGoods(data, args).then(res => {

						if (res.code == 200) {
							this.orderInfo = res.data
							if (res.data.memberReceiveAddressList != []) {
								this.addressInfo = res.data.memberReceiveAddressList[0]
							}

							for (let item of res.data.memberReceiveAddressList) {
								if (item.defaultStatus == 1) {
									console.log(item)
									this.addressInfo = item
								}
							}
							console.log(this.addressInfo)
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			generateConfirmOrder: function() {
				let data = this.CartIds
				let args = {
					ContentType: 'application/json'
				}
				API.generateConfirmOrder(data, args).then(res => {

						if (res.code == 200) {
							this.orderInfo = res.data
							this.addressInfo = res.data.memberReceiveAddressList[0]
							for (let item of res.data.memberReceiveAddressList) {
								if (item.defaultStatus == 1) {
									this.addressInfo = item
								}
							}
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			minusNumDom() {
				if (this.numInput > 1) {
					this.numInput--
				}
			},
			addNumDom() {
				this.numInput++
			},
			popup() {
				let args = {
					ContentType: 'application/json'
				}
				if (this.addressInfo == null) {
					this.$alert('请添加收货地址');
					return false
				}
				if (this.urlOrderType == 'cart') {

					let data = {
						cartIds: this.CartIds,
						couponId: null,
						memberReceiveAddressId: this.addressInfo.id,
						payType: 0,
						useIntegration: 0,
						userNote: this.userNote,

					}
					API.orderGenerateOrder(data, args).then(res => {
							if (res.code == 200) {

								uni.navigateTo({
									url: "/order/confirmOrder?order="+res.data.order.id
								})
							}
						})
						.catch(err => {
							console.log(err)
						})
				} else {
					let data = {
						skuId: this.CartIds.join(','),
						couponId: null,
						memberReceiveAddressId: this.addressInfo.id,
						payType: 0,
						useIntegration: 0,
						userNote: this.userNote,
						quantity: this.goodsQuantity
					}
					this.CartIds
					API.generateOrderBySku(data, args).then(res => {

							if (res.code == 200) {

								uni.navigateTo({
									url: "/order/confirmOrder?order="+res.data.order.id
								})
							}
						})
						.catch(err => {
							console.log(err)
						})

				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.orderIndex {
		background: #F9F9F9;
		min-height: 100vh;
		padding: 30rpx;
	}

	.orderDom {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 32rpx;
		margin-bottom: 30rpx;
	}

	.orderInfo {
		display: flex;
		width: 100%;
		margin-top: 80rpx;
		box-sizing: border-box;
		align-items: center;

		.orderInfoCon {
			width: 800rpx;

		}

		.orderAddressImg {
			width: 100rpx;
			height: 58rpx;
			margin-right: 20rpx;
		}

		.orderAddress {
			color: #666;
			font-size: 24rpx;
		}

		.orderadd {
			width: 50rpx;
			height: 30rpx;

		}
	}

	.orderGoods {
		background-color: #fff;
		border-radius: 32rpx;
	}

	.goodsInfo {
		display: flex;
		width: 100%;

		image {
			width: 200rpx;
			height: 200rpx;
			background-color: #666;
			margin-right: 20rpx;
		}

		.goodsInfoText {
			font-size: 30rpx;
			flex: 1;

			.network {
				width: 390rpx;
				font-size: 20rpx;
				background: rgba(153, 153, 153, 0.1);
				border-radius: 4px;
				color: #666666;
				padding: 10rpx;
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.goodsTitle {
				font-size: 30rpx;
				display: flex;

				.goodsName {
					height: 60rpx;
					display: -webkit-box;
					text-overflow: ellipsis;
					word-break: break-all;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}

			.orderTime {
				font-size: 20rpx;
				color: #666666;
			}
		}

	}

	.goodsList {
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;

		.goodsNum {
			display: flex;
		}

		.notes {
			flex: 1;
			font-size: 24rpx;
			text-align: right;
		}

		.goodsPrice {
			color: #6954D5;
			font-size: 30rpx;
		}

		.minusBtn,
		.addNumBtn {
			width: 60rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: rgba(153, 153, 153, 0.1);
			font-size: 36rpx;
			cursor: pointer;
		}

		.numInput {
			width: 100rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			background: rgba(153, 153, 153, 0.1);
			text-align: center;
			line-height: 60rpx;
		}

		text {
			color: #999;
			margin-left: 10rpx;
		}

		image {
			width: 20rpx;
			height: 20rpx;
			margin-left: 10rpx;
		}
	}

	.orderGoodsBtn {
		position: fixed;
		background-color: #fff;
		width: 100%;
		bottom: 0;
		padding: 20rpx;
		left: 0;
		text-align: right;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.orderGoodNum {
			color: #666;
			margin-right: 15rpx;
			font-size: 22rpx;
		}

		.orderAmount {
			text {
				color: #6954D5;
			}

			font-size: 30rpx;

			.discount {
				font-size: 24rpx;
				color: #999;

				text {
					color: #999;
				}
			}
		}

		.orderBtn {
			width: 200rpx;
			height: 80rpx;
			background: #6954D5;
			border-radius: 20px;
			text-align: center;
			color: #fff;
			line-height: 80rpx;
			margin-left: 30rpx;
			cursor: pointer;
		}
	}
</style>